<template>
	<el-container class="bg">
		<el-container >
			<el-header style="background-color: rgba(150,168,190,1);">
				<strong style="float: left;margin-left: 15%;
				 font-family:微软雅黑,serif; font-size: 25px;
         color: black">
          模块化交通预测开源平台
        </strong>

				<div class="header-avatar">

					<el-dropdown>
						<span class="el-dropdown-link">
						{{username}}<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item @click.native="logout">退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>

				</div>

			</el-header>
			<el-main style="background-color: rgba(200,200,200,0.1);">
        <div style="width: 20px"></div>
<!--				<Tabs></Tabs>-->
				<el-card style="margin-left: 10%; margin-right: 10%; " shadow="never">
					<router-view/>
				</el-card>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import SideMenu from "./inc/SideMenu";
	import Tabs from "./inc/Tabs";

	export default {
		name: "Home",
		components: {
			SideMenu, Tabs
		},
		data() {
			return {
        userId : "",
        username: "username",
        Home: {
          backgroundImage:"url(" + require("../assets/img-1.jpg") + ")"
        }
			}
		},
		created() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
        this.userId = this.$route.query.userId;
        this.username = this.$route.query.username;
			},
			logout() {
				this.$router.push({
          path: "/",
          query: {userId:'', username:''}
        })
      }
			}
		}
</script>

<style scoped>
	.el-container {
		padding: 0;
		margin: 0;
		height: 100%;
	}

	.header-avatar {
		float: right;
		width: 210px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.el-dropdown-link {
		cursor: pointer;
	}

	.el-header {
		background-color: rgba(236,130,132,80%);
    /*background-image: url("../assets/pic.jpg");*/
		color: black;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;

		line-height: 200px;
	}

	el-main {
		padding: 0;
    height: 100%;

	}

	a {
		text-decoration: none;
	}
  .bg {
    background-image: url("../../src/assets/pic-4.jpg");
    background-size: 100%;
    /*background-color: #9d9d9d;*/
    background-color: rgba(255, 255, 255, 0.2);
  }
</style>